<template>
	<view class="">
		<view class="header-title">
			<navigator open-type="navigateBack"><u-icon class="back" name="arrow-left" color="#999" size="22"></u-icon></navigator>
			<text>选择你感兴趣的分类</text>
			<text class="subtitle">完善资料，方便为您推荐个性化内容</text>
			<text class="subtitle tg" @click="onHomePage()">跳过</text>
		</view>
		<view class="tag-content">
			<view class="title">星座</view>
			<view class="tag-item" >
				<view class="" v-for="(item, index) in hobbyCheckboxs" :key="index">
					<u-tag
						:text="item.name"
						:plain="!item.checked"
						:name="index"
						:icon="item.icon"
						class="tag"
						shape="circle"
						borderColor="#DCDADB"
						@click="hobbyCheckboxClick"
					>
					</u-tag>
			  </view>
			</view>
			
			<view class="title">爱好</view>
			<view class="tag-item" >
				<view class="" v-for="(item, index) in interestCheckboxs" :key="index">
					<u-tag
						:text="item.name"
						:plain="!item.checked"
						:name="index"
						:icon="item.icon"
						class="tag"
						shape="circle"
						borderColor="#DCDADB"
						@click="interestCheckboxClick"
					>
					</u-tag>
			  </view>
			</view>
			
			<view class="title">旅游偏好</view>
			<view class="tag-item" >
				<view class="" v-for="(item, index) in checkboxs" :key="index">
					<u-tag
						:text="item.name"
						:plain="!item.checked"
						:name="index"
						:icon="item.icon"
						class="tag"
						shape="circle"
						borderColor="#DCDADB"
						@click="checkboxClick"
					>
					</u-tag>
			  </view>
			</view>
			<view class="next-button">
				<u-button
					shape="circle"
					:text="'进入到主页(已选'+num+'个)'"
					size="large" 
					color="linear-gradient(to right, #45B4FD, #09EAFE)" 
					@click="onRegister"
				></u-button>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	
	import { getHotTopics, register,getUser } from '@/request/api.js'
	export default {
		data() {
			return {
				num:0,
				tagInfo:[],
				hobbyCheckboxs:[],
				interestCheckboxs:[],
				checkboxs: [],
				sex:null,
				birthday:null
			}
		},
		onLoad(option) {
			this.sex = option.gender
			this.birthday = option.birthday
			this.getTagList()
		},
		methods: {
			getTagList() {
				getHotTopics().then(res=>{
					console.log(res);
					this.tagInfo = res.data.data
					this.initData()
				})
			},
			initData(){
				this.tagInfo.forEach(item=>{
					if(item.title=="星座"){
						this.hobbyCheckboxs = item.topicsList.map(item=>{
							return{
								checked: false,
								name:item.title,
								topicId:item.topicId
							}
						})
					}else if(item.title=="爱好"){
						this.interestCheckboxs = item.topicsList.map(item=>{
							return{
								checked: false,
								name:item.title,
								topicId:item.topicId
							}
						})
					}else {
						this.checkboxs = item.topicsList.map(item=>{
							return{
								checked: false,
								name:item.title,
								topicId:item.topicId
							}
						})
					}
				})
			},
			onRegister(){
				let topicIds = []
				this.hobbyCheckboxs.forEach(item=>{
					if(item.checked) topicIds.push(item.topicId)
				})
				this.interestCheckboxs.forEach(item=>{
					if(item.checked) topicIds.push(item.topicId)
				})
				this.checkboxs.forEach(item=>{
					if(item.checked) topicIds.push(item.topicId)
				})
				let params = {
					topicIds:topicIds,
					birthday:this.birthday,
					sex:this.sex=='female'?0:1,
					userId:this.$store.state.userInfo.userId
				}
				console.log("params===========",params,this.$store.state.userInfo);
				register(params).then(res=>{
					this.getUserInfo()
				})
			},
			// 获取用户信息
			getUserInfo(){
				getUser().then((res)=>{
					this.$store.commit('setUserInfo',res.data.data);
					this.onHomePage()
					// 获取目标页面路径
					// const targetUrl = uni.getStorageSync('targetUrl');
					// console.log(targetUrl);
					// // 清除目标页面记录
					// uni.removeStorageSync('targetUrl');
					// // 跳转到目标页面
					// uni.reLaunch({
					// 	url: targetUrl,
					// });
				})
			},
			onHomePage(){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
			hobbyCheckboxClick(name){
				this.hobbyCheckboxs[name].checked = !this.hobbyCheckboxs[name].checked;
				if(this.hobbyCheckboxs[name].checked){
					this.num++
				}else{
					this.num--
				}
			},
			interestCheckboxClick(name){
				this.interestCheckboxs[name].checked = !this.interestCheckboxs[name].checked;
				if(this.interestCheckboxs[name].checked){
					this.num++
				}else{
					this.num--
				}
			},
			checkboxClick(name) {
			    this.checkboxs[name].checked = !this.checkboxs[name].checked;
				if(this.checkboxs[name].checked){
					this.num++
				}else{
					this.num--
				}
			},
			tagClick(name) {
				console.log("name============",name);
			    this.checkboxs[name].checked = !this.checkboxs[name].checked;
				if(this.checkboxs[name].checked){
					this.num++
				}else{
					this.num--
				}
			},
		}
	}
</script>

<style lang="scss">
	::v-deep .u-tag--primary{
		background: linear-gradient(to right, #45B4FD, #09EAFE);
		border-color: #FFFFFF!important;
		color: #FFFFFF!important;
	}
	::v-deep .u-tag__text--primary--plain{
		color:#959394!important;
	}
	::v-deep .u-tag__text--primary{
		// color:#959394;
	}
	page{
		// #ifdef APP-PLUS
		padding-top: 90rpx!important;
		// #endif
	}
	.tag-content{
		
		padding: 50rpx;
		display: flex;
		flex-direction: column;
	}
	.header-title{
		font-size: 38rpx;
		font-weight: 700;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #DAD7D9;
		.back{
			position: absolute;
			top: 20rpx;
			left: 20rpx;
		}
		.subtitle {
			font-size: 28rpx;
			color: #999;
			font-weight:500;
			margin-top: 10rpx;
		}
		.tg{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
	}
	.title{
		font-weight: 700;
		margin: 30rpx 0;
		// background-color: #FFA164;
		border-left:8rpx solid #F30505;
		padding-left: 20rpx;
		height: 35rpx;
		letter-spacing: 5rpx;
		line-height: 35rpx;
	}
	.tag-item{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.tag{
		color: #959394!important;
		// width: 150rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}
	.next-button {
		width: calc(100% - 100rpx);
		position: fixed;
		bottom: 80rpx;
		font-weight: bold;
		letter-spacing: 5rpx;
	}
</style>
